<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1>1111</h1>


    <script src="../js/tools.js"></script>
    <script>

        // this  -> window 
        // 事件处理函数   事件源
        // 对象中    对象本身

        // document.onclick = function () {
        //     console.log(this);
        // }


        // const obj = {
        //     name: 'cc',
        //     say: function () {
        //         console.log('hi , mhy name is ' + this.name);
        //     }
        // }



        // const oH1 = document.querySelector('h1');
        // oH1.onclick = function () {
        //     this.innerHTML = '666';    // oH1
        //     setTimeout(function () {
        //         console.log(this);    // window         ????????????????
        //         setCss(this, {
        //             color: 'red'
        //         })
        //     }, 1000)
        // }


        const oH1 = document.querySelector('h1');
        oH1.onclick = function () {
            this.innerHTML = '666';    // oH1
            setTimeout(() => {            // 改了箭头函数以后   this就跟上面一样指向oH1
                console.log(this);    // oH1
                setCss(this, {
                    color: 'red'
                })
            }, 1000)
        }







    </script>

</body>

</html>